<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
</head>
<script>
    window.onload = function () {
        init();
        findProduct(1);
    }

    async function init() {
        let info = await ajaxGet("/user/getUserSession");
        if (info == null || info.length == 0) {
            $("infoDiv").innerHTML = "你还没有<a href='/html/login.html'>登录</a>呢";
        } else {
            $("infoDiv").innerHTML = "你好" + info.username;
        }
    }

    async function findProduct(pageNo) {
        let params = {
            pageNo,
            productName: $("productName").value
        }
        let pageInfo = await ajaxGet("/product/findByItem", params);
        let list = pageInfo.list;
        console.log(pageInfo.list)
        console.log(list)

        let str = "";
        for (let i = 0; i < list.length; i++) {
            let obj = list[i];
            str += `<div style="text-align: center;width: 400px">
                    <img src="/html/imgs/productImg/${obj.productImg}.jpg" width="200px" height="200px">
                    <span>商品名称：${obj.productName}</span>
                    <span>单价：${obj.productPrice}</span>
                    <span>评论数量：${obj.count}</span>
                    <a href="/html/comment.html?productId=${obj.productId}">查看商品详情</a>
                    </div>`;
        }
        $("productDiv").innerHTML = str;

        let cutStr = "";

        for (let i = 1; i <= pageInfo.pages; i++) {
            cutStr += `<a href="javascript:findProduct(${i})" style="margin: 20px">${i}</a>`;
        }
        $("cutPage").innerHTML = cutStr;

    }


</script>


<body>
<div id="infoDiv">

</div>

<div style="display: flex" id="productDiv">

</div>

<div style="" id="cutPage">

</div>

<div style="margin-top: 10px">
    请输入商品名称 <input type="text" id="productName"><br>
    <button onclick="findProduct(1)">查询</button>
</div>

</body>
</html>